
<div class="container ff-bg" id="div_play_records">
    <div class="page-header">
        <h2 class="ff-text-right">
            <span class="glyphicon glyphicon-film ff-text"></span>
            <span>我的观影记录：：</span>
        </h2>
    </div>
    <div class="row ff-row">
        <div class="ff-col">
    <ul class="list-unstyled vod-item-img ff-img-215" id="ul_play_records">

    </ul>
        </div></div>
</div>
<div class="clearfix ff-clearfix"></div>
<script type="text/javascript">

    var webdata = {
        get:function(key){
            var val= window.sessionStorage.getItem(key);
            if(!val){
                val=window.localStorage.getItem(key);
            }
            return val;
        }
    };

    $(function () {
        var strRecords = webdata.get('playRecords');
        if(!strRecords){
            $('#div_play_records').hide();
            return;
        }

        var records = JSON.parse(strRecords);

        var liHtmlTmp = `<li class="col-lg-2 col-sm-3 col-xs-4"> <p class="image"> <a href="vod_url">
                    <img class="img-responsive img-thumbnail ff-img" data-original="vod_pic" alt="vod_name"> </a></p>
            <h2 class="text-nowrap ff-text-right"> <a href="vod_url" title="vod_name">vod_name</a></h2></li>`;

        for(var i=0;i<records.length;i++){
            if(i>=12){
                break;
            }
            var record = records[i];
            var vodUrl = '/video/play/'+record['vod_id']+'-'+record['play_sid']+'-'+record['play_pid']+'.html';
            var liHtml = liHtmlTmp.replace(/vod_url/g,vodUrl).replace(/vod_pic/g,record['vod_pic']).replace(/vod_name/g,record['vod_name']);

            $('#ul_play_records').append(liHtml);
        }

    })

</script>
